<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingTop: '10px', paddingBottom: '14px' }">
      <template #title> 内容发布比例 </template>
      <template #extra>
        <a-link>查看更多</a-link>
      </template>
      <sa-chart style="width: 100%; height: 347px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAppStore } from '@/store'

const appStore = useAppStore()
const chartOption = ref({})
const loading = ref(false)

const tooltipItemsHtmlString = (items) => {
  return items
    .map(
      (el) => `<div class="content-panel">
    <p>
      <span style="background-color: ${el.color}" class="tooltip-item-icon"></span>
      <span>
      ${el.seriesName}
      </span>
    </p>
    <span class="tooltip-value">
      ${Number(el.value).toLocaleString()}
    </span>
  </div>`
    )
    .join('')
}

onMounted(async () => {
  const xAxis = ['0.00', '2.00', '4.00', '6.00', '8.00', '10.00', '12.00', '14.00', '16.00', '18.00', '20.00', '22.00']

  const textChartsData = [2922, 1027, 1943, 1583, 1375, 1031, 1328, 1793, 1299, 2592, 1304, 2293]
  const imgChartsData = [2147, 2480, 2478, 2590, 2716, 2911, 1588, 1827, 2437, 1399, 2104, 2474]
  const videoChartsData = [1318, 1518, 2550, 2797, 2485, 2337, 1026, 2792, 2895, 2529, 1525, 2521]

  chartOption.value = {
    grid: {
      left: '4%',
      right: 0,
      top: '20',
      bottom: '60',
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      textStyle: {
        color: '#4E5969',
      },
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLine: {
        lineStyle: {
          color: appStore.mode === 'dark' ? '#3f3f3f' : '#A9AEB8',
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        lineStyle: {
          color: '#86909C',
        },
      },
      axisLabel: {
        color: '#86909C',
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#86909C',
        formatter(value, idx) {
          if (idx === 0) return `${value}`
          return `${value / 1000}k`
        },
      },
      splitLine: {
        lineStyle: {
          color: appStore.mode === 'dark' ? '#3F3F3F' : '#E5E6EB',
        },
      },
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter(params) {
        const first = params[0]
        return `<div>
            <p class="tooltip-title">${first.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params)}
          </div>`
      },
      className: 'echarts-tooltip-diy',
    },
    series: [
      {
        name: '纯文本',
        data: textChartsData,
        stack: 'one',
        type: 'bar',
        barWidth: 16,
        color: appStore.mode === 'dark' ? '#4A7FF7' : '#246EFF',
      },
      {
        name: '图文类',
        data: imgChartsData,
        stack: 'one',
        type: 'bar',
        color: appStore.mode === 'dark' ? '#085FEF' : '#00B2FF',
      },
      {
        name: '视频类',
        data: videoChartsData,
        stack: 'one',
        type: 'bar',
        color: appStore.mode === 'dark' ? '#01349F' : '#81E2FF',
        itemStyle: {
          borderRadius: 2,
        },
      },
    ],
  }
})
</script>

<style>
.echarts-tooltip-diy {
  background: linear-gradient(304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%) !important;
  border: none !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
}

.echarts-tooltip-diy .tooltip-item-icon {
  display: inline-block;
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.echarts-tooltip-diy .tooltip-title,
.echarts-tooltip-diy .tooltip-value {
  font-size: 13px;
  line-height: 15px;
  display: flex;
  align-items: center;
  text-align: right;
  color: #1d2129;
  font-weight: 700;
}

.echarts-tooltip-diy .tooltip-title {
  margin: 0 0 10px;
}

.echarts-tooltip-diy p {
  margin: 0;
}

.echarts-tooltip-diy .content-panel {
  display: flex;
  justify-content: space-between;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.8);
  width: 164px;
  height: 32px;
  line-height: 32px;
  box-shadow: 6px 0 20px #2257bc1a;
  border-radius: 4px;
  margin-bottom: 4px;
}
</style>

<style scoped lang="less">
.general-card {
  border-radius: 4px;
  border: none;

  :deep(.arco-card-header) {
    height: auto;
    padding: 20px;
    border: none;
  }
}
</style>
